<script setup lang="ts">
  import { Row as ARow, Col as ACol} from 'ant-design-vue'
  import { reactive} from 'vue'
  import { Icon } from '/@/components/Icon';

  const setting = reactive({
    passwordQueBind: false 
  })
</script>

<template>
  <div class="security-setting">
    <p class="desc">用于密码找回</p>
    <a-row type="flex" justify="space-between" :gutter="[10, 20]">
      <a-col span="8">
        <Icon icon='teenyicons:password-outline' style='margin-right: 10px;'/>
        <span>密保问题</span>
      </a-col>
      <a-col span="8">
        <span v-if="setting.passwordQueBind">已绑定</span>
        <span v-else>未绑定</span>
      </a-col>
      <a-col span="8">
        <a v-if="!setting.passwordQueBind">绑定</a>
      </a-col>
      <a-col span="8">
        <Icon icon='icon-park-outline:wechat' style='margin-right: 10px;'/>
        <span>企业微信</span>
      </a-col>
      <a-col span="8">
        <span v-if="setting.passwordQueBind">已绑定</span>
        <span v-else>未绑定</span>
      </a-col>
      <a-col span="8">
        <a v-if="!setting.passwordQueBind">绑定</a>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less">
  .security-setting {
    width: 800px;
    margin: 0 auto;
    p.desc {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 25px;
    }
    .ant-col {
      text-align: center;
    }
  }
</style>